<template>
    <div class="buyFooter">
        <ul>
            <li class="servicer">
                <img src="../../../static/buy/kefu.png" alt="">
                <p>客服</p>
            </li>
            <li class="gowuche">
                <img src="../../../static/buy/carts.png" alt="">
                <p>购物车</p>
                <span class="cartNum" v-if='cartNum.length!=0'>{{cartNum.length}}</span>
            </li>
           
            <li class="btn buyIt"  v-if='remainCount'>
                立即购买
            </li>
             <li class="btn gouwuche" @click="addCart" v-if='remainCount'>
                加购物车
            </li>
             <li class="btn buyIt nullNum"  v-if='!remainCount'>
                到货提醒
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  data() {
    return {
      cartNum: [],
      remainCount: true
    }
  },
  methods: {
    addCart() {
      var _this = this
      wx.showToast({
        title: '成功',
        icon: 'success',
        duration: 1000,
        success: function() {
          _this.cartNum.push('1')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.buyFooter {
  height: 90rpx;
  width: 100%;
  border-top: 1px solid #e5e5e5;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  padding: 12rpx 18rpx;
  box-sizing: border-box;
  ul {
    li {
      float: left;
      &.servicer {
        margin-right: 70rpx;
      }
      &.gowuche {
        margin-right: 0rpx;
        position: relative;
        .cartNum {
          position: absolute;
          width: 20rpx;
          height: 20rpx;
          border-radius: 50%;
          background: #c75050;
          right: 0;
          top: 0;
          color: #fff;
          font-size: 10px;
          line-height: 20rpx;
          text-align: center;
        }
      }
      &.btn {
        width: 240rpx;
        height: 60rpx;
        float: right;
        line-height: 60rpx;
        text-align: center;
        border-radius: 10rpx;
        &.add {
          color: #c78550;
          border: 1px solid #c78550;
        }
        &.buyIt {
          color: #fff;
          background: #c78550;
          border: 1px solid #c78550;
        }
        &.gouwuche {
          border: 1px solid #c78550;
          margin-right: 10rpx;
          color: #c78550;
        }
        &.nullNum {
          background: #999;
          color: #fff;
          border: 1px solid #999;
        }
      }
      img {
        height: 40rpx;
        width: 40rpx;
      }
      p {
        font-size: 18rpx;
        color: #666;
      }
    }
  }
}
</style>
